<template>
	<div class="shop-logistics">
	      <div class="post-item" v-for="(item, index) in dataList" :key="index">
	        <div class="logistics-list">
	          <div class="order-img">
	            <image
	             style="width: 28vw;height: 32vw;border-radius: 3vw;"
	              src="../../static/shop/qq_logo.png"
	            />
	          </div>
	          <div class="order-description">
	            <div>{{ getDictValueByKey(item.logisticsStatus) }}</div>
	            <div>
	              {{ getlogisticsName(item.company) }}快递：{{ item.logisticsNum }}
	            </div>
	            <div class="orderId">
	              <span class="order-out"> 订单编号：</span
	              ><span class="order-in">{{ orderId }}</span>
	            </div>
	          </div>
	        </div>
	        <div class="post-list">
	          <div
	            class="post-list-item"
	            v-for="(itemLog, index1) in item.logList"
	            :key="index1"
	          >
	            <div class="post-list-time">
	              <div>{{ itemLog.date.slice(5) }}</div>
	              <div class="time">{{ itemLog.time }}</div>
	            </div>
	            <div
	              :class="item.logList.length == index1 + 1 ? '' : 'post-list-icon'"
	            >
	              <div :class="index1 == 0 ? 'circular-out' : 'circular-out-grey'">
	                <div class="circular-in"></div>
	              </div>
	            </div>
	            <div class="post-description">
	              <div class="post-list-state">
	                {{ getDictValueByKey(itemLog.opreateType) }}
	              </div>
	              <div v-html="itemLog.content" class="post-list-description"></div>
	            </div>
	          </div>
	        </div>
	      </div>
	      <div v-if="isShowEmpty === 1" style="margin-top: 120px">
	        <div class="emptyDataOfCouponImg"></div>
	        <div class="emptyDataOfCouponTip">暂无物流信息</div>
	      </div>
	  </div>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				      img: "",
				      dataList: [],
				      postDictItem: [],
				      orderId: "",
					  id:"",
				      isShowEmpty: 0,
			}
		},
		onLoad(e) {
			this.id= Number(e.id) 
			this.orderId=e.orderNum
			this.init();
		},
		methods: {
			getDictValueByKey(value){
				var stateText=""
				this.postDictItem.forEach((item)=>{
					if(item.code==value){
					    stateText=item.label
					}
				})
				return stateText
			},
			 //获取物流字典状态
			    getPostDictItem() {
			      api.SYS_DICT_GET_BY_CODES(JSON.stringify(["LOGISTICS_STATUS"]) ).then(({ data }) => {
			        if (data.body[0].dictItems) {
			          this.postDictItem = data.body[0].dictItems;
			        }
			      });
		     },
			  init() {
			      this.getPostDictItem();
			      this.getPostLists();
			    },
			    getPostLists() {
			      var _that = this;
			      if (this.id) {
			        api.SM_LOGISTICS_GET_BY_ORDER_ID(JSON.stringify(this.id)).then(({ data }) => {
			          if (data.body) {
			            _that.dataList = data.body;
			          } else {
			            _that.isShowEmpty = 1;
			          }
			        });
			      }
			    },
			
			    //获取快递名称
			    getlogisticsName(logistics) {
			      var logisticsName = "";
			      switch (logistics) {
			        case 0:
			          logisticsName = "德邦";
			          break;
			        case 1:
			          logisticsName = "EMS";
			          break;
			        case 2:
			          logisticsName = "顺丰";
			          break;
			        case 3:
			          logisticsName = "中通";
			          break;
			        case 4:
			          logisticsName = "申通";
			          break;
			        case 5:
			          logisticsName = "圆通";
			          break;
			        case 6:
			          logisticsName = "天天";
			          break;
			        case 7:
			          logisticsName = "韵达";
			          break;
			        case 8:
			        case 9:
			          logisticsName = "百世";
			          break;
			        case 10:
			          logisticsName = "宅急送";
			          break;
			        case 11:
			          logisticsName = "苏宁";
			          break;
			        case 12:
			          logisticsName = "京东";
			          break;
			      }
			      return logisticsName;
			    },
		}
	}
</script>

<style lang='scss' scoped>
    .shop-logistics {
      background: #fff;
      min-height: 100vh;
      -webkit-overflow-scrolling: touch;
      .post-item {
        margin-bottom: 20px;
      }
      .logistics-list {
        display: flex;
        background: #fff;
        padding: 4vw;
        width: 100%;
        height: 109px;
        border-radius: 3vw;
        .order-description {
          margin-left: 12px;
          & > div:nth-of-type(1) {
            font-size: 17px;
            font-weight: bold;
            color: #cc363c;
          }
          & div:nth-of-type(2) {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
          }
          & div:nth-of-type(3) {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
          }
        }
      }
      .post-list {
        margin-top: 1vw;
        padding: 4vw;
        background: #fff;
        width: 100%;
        height: 100%;
        .post-list-item {
          position: relative;
          display: flex;
          width: 100%;
          // align-items: stretch;
          height: 100%;
        }
        .post-list-time {
          width: 58px;
          font-size: 14px;
          font-weight: bold;
          color: #888888;
          text-align: right;
          margin-right: 5px;
          .time {
            font-size: 11px;
            font-weight: bold;
            color: #999999;
            text-align: right;
            padding-right: 3px;
          }
        }
    
        .post-list-icon {
          position: relative;
          & ::after {
            content: "";
            position: absolute;
            left: 9px;
            width: 1px;
            top: 20px;
            height: calc(100% - 20px);
            background: #ececec;
            z-index: 9;
          }
        }
    
        .circular-out {
          // display: flex;
          width: 20px;
          height: 20px;
          background: #ffffff;
          border: 2px solid #3b8aed;
          justify-content: center;
          align-content: center;
          border-radius: 50%;
          margin-right: 6px;
          padding-top: 3px;
          padding-left: 3px;
          z-index: 10;
          .circular-in {
            width: 10px;
            height: 10px;
            background: #3b8aed;
            border-radius: 50%;
          }
        }
    
        .circular-out-grey {
          // display: flex;
          width: 20px;
          height: 20px;
          background: #ffffff;
          border: 2px solid #cfd4d9;
          justify-content: center;
          align-content: center;
          border-radius: 50%;
          margin-right: 6px;
          padding-top: 3px;
          padding-left: 3px;
          z-index: 10;
          .circular-in {
            width: 10px;
            height: 10px;
            background: #cfd4d9;
            border-radius: 50%;
          }
        }
    
        .post-list-state {
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }
        .post-description {
          width: 100%;
        }
        .post-list-description {
          // width: 216px;
          width: 100%;
          font-size: 13px;
          font-weight: bold;
          color: #888888;
          line-height: 20px;
          padding-bottom: 10px;
        }
      }
    }
    
    .emptyDataOfCouponImg {
      width: 238px;
      height: 120px;
      background: url(../../static/shop/coupon_empty.png) no-repeat;
      background-size: 100% 100%;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    
    .emptyDataOfCouponTip {
      margin-top: 10px;
      width: 100%;
      text-align: center;
      margin-left: 50%;
      color: #969799;
      transform: translateX(-50%);
      font-size: 14px;
    }
    .orderId {
      display: flex;
      width: 100%;
    }
    
    .order-in {
      max-width: 60%;
      text-align: left;
      display: inline-block;
      word-wrap: break-word;
      word-break: break-all;
    }
</style>
